<template>
    <div>
        <div id="aaa">
            <el-table border :data="productLists" stripe style="width: 100%">
                <!-- prop='属性名' label='网页展示的标签' -->
                <el-table-column align="center" prop="clazzs[0].name" label="班级名"
                                 width="this.clientWidth/2"></el-table-column>
                <el-table-column align="center" prop="courses[0].name" label="课程名"
                                 width="this.clientWidth/2"></el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="200">
                    <!-- 编辑按钮组 -->
                    <template slot-scope="scope">
                        <el-button type="primary" @click="homework(scope.row)" size="small">查看作业情况</el-button>
                        <el-button type="danger" @click="handledelete(scope.row)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--
                  分页功能
                  @size-change:显示行数发生改变执行的方法
                  @current-change:页数改变发生执行的方法
                  :page-sizes:可提供用户选择显示行数的选择
                  :current-page.sync:高亮显示页面
                  layout="total, sizes, prev, pager, next, jumper" :分页功能--统计,上一页,页数,下一页和跳转
                  :total:统计拥有多少条数据
            -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 30, 40]"
                    :current-page.sync="currPage"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "List",
        data() {
            return {
                productLists: [],
                pos: 0, //坐标
                pageSize: 10, //每一页显示的数据条数
                total: 150, //记录总数
                maxPage: 99, //最大页数
                currPage: 1, //当前页
                dialogFormVisible: false, //dialog框是否显示
                isAdd: false, //判断是否为添加方法或者更新方法
                //双向绑定学生信息
                user: {
                    id: "",
                    name: "",
                    password: "",
                    phone: ""
                },
                id: "",
                clientWidth: 0
            };
        },
        components: {},
        methods: {
            //分页显示行数发生改变
            handleSizeChange(pageSizes) {
                //每一页显示的数据条数
                this.pageSize = pageSizes;
                //从新加载数据
                this.pageHandler(0);
            },
            //分页页数发生改变
            handleCurrentChange(currentPage) {
                this.currPage = currentPage;
                //改变数据
                this.pageHandler((this.currPage - 1) * this.pageSize);
            },
            //删除学生事件
            handledelete(row) {
                //使用 axios 调用后台接口
                var url =
                    "/api/teacher/deleteCourse?courseId=" +
                    row.courses[0].id +
                    "&teacherId=" +
                    this.$route.query.id +
                    "&clazzId=" +
                    row.clazzs[0].id;
                axios
                    .get(url)
                    .then(res => {
                        this.currPage = 1;
                        this.handleCurrentChange(1);
                        this.$message("更新成功!");
                    })
                    .catch(err => {
                        this.$message.error('错了哦，请重新操作')
                        console.log(err);
                    });
            },
            //编辑学生事件
            handleClick(row) {
                //因为是更新用户所以参数为false
                this.isAdd = false;
                //让dialog显示
                this.dialogFormVisible = true;
                //动态获取学生信息
                this.user.id = row.id;
                this.user.name = row.name;
                this.user.password = row.password;
                this.user.phone = row.phone;
            },
            //pagehandler方法 跳转到坐标
            pageHandler(pos) {
                //防止传入坐标错误,进行修改
                if (pos <= 0) {
                    pos = 0;
                }
                if (pos >= this.total) {
                    if (this.total % this.pageSize == 0) {
                        pos = this.total - this.pageSize;
                    } else {
                        pos = this.total - (this.total % this.pageSize);
                    }
                }
                this.pos = pos;
                //使用 axios 调用后台接口
                var url =
                    "/api/teacher?pos=" +
                    this.pos +
                    "&rows=" +
                    this.pageSize +
                    "&teacherId=" +
                    this.$route.query.id;
                axios
                    .get(url)
                    .then(res => {
                        //将数据绑定对应属性中
                        this.productLists = res.data.list;
                        this.total = parseInt(res.data.total);
                        //设置最大页数,向下取整
                        this.maxPage = Math.ceil(this.total / this.pageSize);
                    })
                    .catch(err => {
                        console.log("error");
                    });
            },
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return false;
            },
            homework(row) {
                this.$store.state.clazzId = row.clazzs[0].id;
                this.$store.state.courseId = row.courses[0].id
                this.$router.push({
                    path: "/table/teacherlist/teacherdetail/homework",//跳转路由
                    query: {//参数对象
                        clazz: row.clazzs[0].id,
                        course: row.courses[0].id
                    }
                });
            }
        },
        created() {
            //created  表示页面加载完毕，立即执行
            console.log(this.$store.state.teacherId)
            this.id = this.getQueryVariable("teacherId");
            this.pageHandler(0);
            this.clientWidth = document.body.clientWidth;
        }
    };
</script>

<style lang="scss" scoped>
    #aaa {
        width: 100%;
        height: 2000px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        top: 10px;
        left: 0px;
        z-index: 100;
    }
</style>
